<script setup lang="js">
import { onMounted, reactive, ref, defineAsyncComponent, shallowRef } from 'vue'
import { NMessageProvider, NIcon } from 'naive-ui'
const Index = defineAsyncComponent(() => import('./pages/Index.vue'))
const MessageProvider = shallowRef(NMessageProvider)
import { setItem, getItem, startTyping, simulateClickElement } from '../utils/utils'
const page = reactive({
  component: shallowRef(Index),
})

const imgUrl = chrome.runtime.getURL('img/logo.png') // 获取扩展中的图片路径

let isElementVisible = false // 标记自定义元素是否已经存在

let formValue = ref()
const hide = ref(false)
const hideHandle = () => {
  hide.value = !hide.value
  setItem('kkhide', hide.value)
}

let toggleSide = ref(false)
const toggleSidePanel = (value) => {
  toggleSide.value = !toggleSide.value
  chrome.runtime.sendMessage(
    { action: 'TOGGLESIDEPANEL', data: toggleSide.value },
    function (response) {},
  )

  // simulateClickElement(document.querySelector('.hot-refresh'))
}

onMounted(() => {
  // 读取数据
  getItem('kkhide').then((value) => {
    if (value) {
      hide.value = value
    }
  })

  // chrome.runtime.sendMessage({ action: 'SETSILDER', data: true }, function (response) {})
  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.action === 'simulateTyping') {
      startTyping(request.from, request.data)
    }
  })

  document.addEventListener('mouseup', function () {
    const selection = window.getSelection()
    const selectedText = selection.toString().trim() // 获取选中的文本并去除空格

    // 如果选中的文本不为空
    if (selectedText.length > 0 && !isElementVisible) {
      const range = selection.getRangeAt(0)
      const rect = range.getBoundingClientRect()

      // 获取选中区域的位置
      const top = rect.bottom + window.scrollY // 选区下方的位置
      const left = rect.left + window.scrollX // 选区左侧的水平位置


      // 获取选中文本所在的 DOM 元素
    const startElement = range.startContainer;  // 选区开始位置的 DOM 元素
    const endElement = range.endContainer;      // 选区结束位置的 DOM 元素

    console.log("选中的文本:", selectedText);
    console.log("选中文本的父DOM 元素:", startElement.parentNode);
    console.log("选中文本的父DOM 元素中的文本内容:", startElement.parentNode.innerText);



      // 创建并插入自定义元素
      const customElement = document.createElement('div')
      customElement.id = 'custom-element'
      customElement.textContent = '这是一个自定义元素!'
      customElement.style.position = 'absolute'
      customElement.style.top = `${top}px`
      customElement.style.left = `${left}px`
      customElement.style.padding = '5px 10px'
      customElement.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'
      customElement.style.color = 'white'
      customElement.style.borderRadius = '5px'
      customElement.style.zIndex = '9999'

      document.body.appendChild(customElement)

      // 设置标识，表示元素已经弹出
      isElementVisible = true

      // 点击页面其他区域时移除自定义元素
      // 延迟移除元素的逻辑
      function removeElement(e) {
        if (!customElement.contains(e.target)) {
          customElement.remove()
          isElementVisible = false // 重置标识
          document.removeEventListener('mousedown', removeElement)
          document.removeEventListener('mouseup', removeElement)
        }
      }

      // 在鼠标按下和松开时都添加事件监听，确保在点击页面时能移除元素
      document.addEventListener('mousedown', removeElement)
      document.addEventListener('mouseup', removeElement)
    }
  })
})
</script>
<template>
  <main id="kk-container" class="kk-container" :class="{ kkhide: hide }">
    <div class="kk-main-icon" id="kk-main-icon" @click="toggleSidePanel">
      <img class="kk-main-icon-img" :src="imgUrl" />
    </div>
  </main>
</template>

<style>
.kk-main-icon {
  position: fixed;
  z-index: 9999;
  right: 20px;
  bottom: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.kk-main-icon-img {
  width: 100%;
  height: 100%;
}
.kk-container {
  /* position: fixed;
  z-index: 9999;
  background-color: aliceblue;
  right: 0;
  top: 0;
  min-width: 200px;
  transition:
    width 0.5s,
    min-width 0.5s,
    height 0.5s; */
}
.kkhide {
  /* overflow: hidden;
  width: 77px;
  height: 40px;
  min-width: 40px; */
}
.kk-sub-container {
  position: relative;
  width: 100%;
}
.zhedie {
  position: absolute;
  left: 6px;
  top: 6px;
  cursor: move;
}
.kk-yin {
  position: absolute;
  left: 40px;
  top: 6px;
  cursor: pointer;
}
.v-binder-follower-container {
  z-index: 99999 !important;
}
.n-form-item-feedback-wrapper {
  min-height: 10px;
}
.kk-index {
  padding: 10px 25px;
}
.n-form-item-feedback-wrapper {
  min-height: 10px !important;
}
.kk-h3 {
  color: #42b983;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  margin-bottom: 7px;
  font-size: 16px;
  user-select: none;
  border-bottom: 1px solid lightblue;
}

/* 为自定义元素添加样式 */
#custom-element {
  font-size: 14px;
  font-family: Arial, sans-serif;
}
</style>
